<template>
  <div class="ranklist">
    <div class="title">
      <span>硬地原创音乐榜</span
      ><i class="iconfont icon-youhuaxiangyougengduo"></i>
    </div>
    <Rankitem :arr="arr" />
  </div>
</template>

<script>
import Rankitem from "./rankitem.component.vue";
export default {
  props: ["arr"],
  components: {
    Rankitem,
  },
};
</script>

<style lang="less" scoped>
.ranklist {
  width: 6.37rem;
  height: 5.08rem;
  background-color: #fff;
  border-radius: 0.13rem;
  box-shadow: 1px 0px 2px 0px #888888;
  margin-right: 0.2rem;
  padding-left: 0.3rem;
  .title {
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-size: 0.3rem;
      font-weight: 700;
    }
    i {
      font-size: 0.26rem;
    }
  }
}
</style>